<template>
  <div class="img-verify">
    <canvas :width="width" :height="height" ref="verifyCanvas" @click="reset"></canvas>
  </div>
</template>

<script setup>
const {width,height} = defineProps(['width','height']);
const verifyCanvas  = ref(null);
const emit = defineEmits(['update:text']);
onMounted(()=>{
    reset();
});
function reset(){
    //先生成新的验证码，然后通过自定义事件update:emit发射给父组件
    emit('update:text',draw());
}
defineExpose({
    reset
});
//min=100 max=200 100*随机数就会得到一个0到100之间的数字
function randomNum(min,max){
    return Math.floor(Math.random()*(max-min)+min);
}
function randomColor(min,max){
  const [red,green,blue] = [randomNum(min,max),randomNum(min,max),randomNum(min,max)];
  return `rgb(${red},${green},${blue})`
}
//定义一个字符池
const pool = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
function drawText(ctx){
  let code = '';
  for(let i=0;i<4;i++){
    const char = pool[randomNum(0,pool.length)];
    code += char;
    //字体大小
    const fontSize = randomNum(18,24);
    //旋转的角度
    const deg = randomNum(-30,30);
    //指定这也的字体和大小
    ctx.font = `${fontSize}px Simhei`;
    //用于设置文本的基线对齐方式。
    ctx.textBaseline = 'middle';
    //文字的颜色
    ctx.fillStyle = randomColor(80,150);
    //保存当前的图形状态到状态栈中。
    ctx.save();
    //将绘图原点 (0, 0) 平移到指定的 (x, y) 位置。
    ctx.translate(30*i+15,height/2);//x=15,y=20
    //旋转绘图环境的坐标系统。angle 参数是以弧度为单位的旋转角度。
    ctx.rotate((deg*Math.PI)/180);
    ctx.fillText(char,0,0);
    //从状态栈中恢复先前保存的图形状态。
    ctx.restore();
  }
  return code;
}
function drawInterferenceLines(ctx){
    for(let i=0;i<5;i++){
        //开始创建新的路径，它会清除任何之前创建的路径
        ctx.beginPath();
        //将路径的起点移动到指定的位置，不创建实际的线条。
        ctx.moveTo(randomNum(0,width),randomNum(0,height));
        //添加一个新点，并创建从该点到画布中最后指定点的线条。
        ctx.lineTo(randomNum(0,width),randomNum(0,height));
        //设置用于笔触的颜色、渐变或模式。
        ctx.strokeStyle = randomColor(180,230);
        //关闭当前的子路径，即将当前点连接到路径起始点。
        ctx.closePath();
        //绘制已定义的路径的轮廓
        ctx.stroke();
    }
}
function drawInterferenceDots(ctx){
    for(let i=0;i<40;i++){
        ctx.beginPath();
        ctx.arc(randomNum(0,width),randomNum(0,height),1,0,2*Math.PI);
        ctx.closePath();
        ctx.fillStyle = randomColor(150,200);
        ctx.fill();
    }
}
function draw(){
    const ctx = verifyCanvas.value.getContext('2d');
    //用于设置图形填充的颜色或样式。例如，ctx.fillStyle = "red" 会将填充颜色设置为红色。
    ctx.fillStyle = randomColor(180,230);
    //在指定的位置绘制一个填充的矩形。
    ctx.fillRect(0,0,width,height);
    const code = drawText(ctx);
    drawInterferenceLines(ctx);
    drawInterferenceDots(ctx);
    return code;
}
</script>

<style>

</style>